<template>
  <div class="dashboard-container">
    <div style="margin-bottom: 16px;">
      <span class="t1" style="margin-right: 10px;">运行报表</span>
      <span class="t2">任务调度中心</span>
    </div>
    <el-row :gutter="32" style="margin-bottom:12px;">
      <div class="card-group">
        <el-col :xs="24" :sm="24" :lg="8">
          <div class="card-wrapper" style="background-color: #36a3f7">
            <div class="card-icon-wrapper icon-message">
              <svg-icon icon-class="message" class-name="card-icon" />
            </div>
            <div class="card-description">
              <div class="card-text">
                任务数量
              </div>
              <count-to :start-val="0" :end-val="this.totalTask" :duration="3000" class="card-text" />
            </div>
            <el-divider></el-divider>
            <div class="card-addson">
              调度中心运行的任务数量
            </div>
          </div>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="8">
          <div class="card-wrapper" style="background-color: #ed9a0b">
            <div class="card-icon-wrapper icon-number">
              <svg-icon icon-class="date" class-name="card-icon" />
            </div>
            <div class="card-description">
              <div class="card-text">
                调度次数
              </div>
              <count-to :start-val="0" :end-val="this.totalTrigger" :duration="3000" class="card-text" />
            </div>
            <el-divider></el-divider>
            <div class="card-addson">
              调度中心触发的调度次数
            </div>
          </div>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="8">
          <div class="card-wrapper" style="background: #078684;">
            <div class="card-icon-wrapper icon-people">
              <svg-icon icon-class="swagger" class-name="card-icon" />
            </div>
            <div class="card-description">
              <div class="card-text">
                执行器数量
              </div>
              <count-to :start-val="0" :end-val="this.totalMachine" :duration="3000" class="card-text" />
            </div>
            <el-divider></el-divider>
            <div class="card-addson">
              调度中心在线的执行机器数量
            </div>
          </div>
        </el-col>
      </div>
    </el-row>

    <el-row style="background:#ffffff;padding:16px 16px 16px;margin-bottom:12px;box-shadow: 4px 4px 40px rgba(0, 0, 0, .25);">
      <div class="t2" style="display: inline;">调度报表</div>
      <div class="block" style="display: inline; float: right;">
        <el-date-picker
          v-model="params.date"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="dateFormat"
          :picker-options="pickerOptions2">
        </el-date-picker>
      </div>
      <el-divider></el-divider>
      <el-col :xs="24" :sm="24" :lg="16">
        <test-chart :Day="day" :DayFail="dayfail" :DaySuccess="daysuccess" :DayOngoing="dayongoing"></test-chart>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8" style="margin-top: 30px">
        <pie-chart :Fail="fail" :Success="success" :Ongoing="ongoing"></pie-chart>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import PieChart from './components/PieChart.vue'
import TestChart from './components/TestChart.vue'
import CountTo from 'vue-count-to'
import { getData, fetchList } from '@/api/xxl-job/report'


export default {
  name: 'Dashboard',
  components: {
    PieChart,
    TestChart,
    CountTo
  },
  data() {
    return {
      pickerOptions2: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      params: {
        startTime: '',
        endTime: ''
      },
      totalTask: 0,
      totalMachine: 0,
      totalTrigger: 0, // for cards

      fail: 0,
      success: 0,
      ongoing: 0, // for pieChart

      day: null,
      dayfail: null,
      daysuccess: null,
      dayongoing: null //for linechart
    }
  },
  created() {
    this.processFormat()
    this.fetchData()
  },
  methods: {
    dateFormat(picker) { // 选定日期改格式，同时向后台请求数据
      this.params.startTime = picker[0]
      this.params.endTime = picker[1]

      fetchList(this.params).then(response =>{
        this.fail = response.data.triggerCountFailTotal
        this.success = response.data.triggerCountSucTotal
        this.ongoing = response.data.triggerCountRunningTotal
        this.day = response.data.triggerDayList
        this.dayfail = response.data.triggerDayCountFailList
        this.daysuccess = response.data.triggerDayCountSucList
        this.dayongoing = response.data.triggerDayCountRunningList
      })
    },
    processFormat() {
      const date = new Date()
      const sdate = new Date((new Date().getTime() - 7*24*60*60*1000))
      const formattedEnd = `${date.getFullYear()}-${('0' + (date.getMonth() + 1)).slice(-2)}-${('0' + date.getDate()).slice(-2)} ${('0' + date.getHours()).slice(-2)}:${('0' + date.getMinutes()).slice(-2)}:${('0' + date.getSeconds()).slice(-2)}`;
      const formattedStart = `${sdate.getFullYear()}-${('0' + (sdate.getMonth() + 1)).slice(-2)}-${('0' + sdate.getDate()).slice(-2)} ${('0' + sdate.getHours()).slice(-2)}:${('0' + sdate.getMinutes()).slice(-2)}:${('0' + sdate.getSeconds()).slice(-2)}`;
      this.params.endTime = formattedEnd
      this.params.startTime = formattedStart
    },
    fetchData() {
      getData().then(response => {
        this.totalTask = response.data.jobInfoCount
        this.totalMachine = response.data.executorCount
        this.totalTrigger = response.data.jobLogCount
      })
      fetchList(this.params).then(response => {
        this.fail = response.data.triggerCountFailTotal
        this.success = response.data.triggerCountSucTotal
        this.ongoing = response.data.triggerCountRunningTotal
        this.day = response.data.triggerDayList
        this.dayfail = response.data.triggerDayCountFailList
        this.daysuccess = response.data.triggerDayCountSucList
        this.dayongoing = response.data.triggerDayCountRunningList
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 16px;
  background-color: aliceblue;
}
.t1 {
  font-size: 30px;
  font-weight: 550;
  color: #2a2929;
}
.t2 {
  font-size: 20px;
  color: #666;
}

.card-group{
  .card-wrapper {
    height: 145px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .25);
    border-color: rgba(0, 0, 0);
    margin-bottom: 30px;
    .card-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
      background-color:  #e6e6e6;
    }
    .icon-message {
      color: #36a3f7;
    }
    .icon-number {
      color: #eda20b;
    }
    .icon-people {
      color: #078684;
    }
    .card-icon {
      float: left;
      font-size: 48px;
    }
    .card-description {
      float: left;
      font-weight: normal;
      margin: 26px;

      .card-text {
        line-height: 18px;
        font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        color: rgba(255, 255, 255);
        font-size: 20px;
        margin-bottom: 12px;
        margin-left: 12px;
      }

      .card-num {
        font-size: 20px;
      }
    }
    .card-addson {
      margin: 12px;
      font-weight: lighter;
      font-size: 15px;
      color: #fff;
    }
    .el-divider {
      margin-top: 100px;
      margin-bottom: 0;
      background: 0 0;
      border-top: 2px solid #e8eaec;
    }
  }
}
</style>
